<template>
  <div>
    <div id="echartss"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { createNamespacedHelpers } from "vuex";
const { mapActions, mapState } = createNamespacedHelpers("classes");
var myChart;
export default {
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    myChart = echarts.init(document.getElementById("echartss"));
  },
  watch: {
    rows: {
      handler() {
        myChart.setOption(this.echartData);
      },
      deep: true
    },
  },
  created() {
    this.getAll();
  },
  methods: {
    ...mapActions(["getAllClass"]),
    getAll() {
      this.getAllClass({ pageSize: 10, currentPage: 1 });
    },
  },
  computed: {
    ...mapState(["rows"]),
    echartData() {
        console.log(2322222, this.rows);
      return {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "班级",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
                        //当箭头函数里有两个花括号时会报错，把外层的变成（）就可以了
            data: this.rows.map(item => ({
                value: item.students.length,
                name:item.name
            })),
          
            

          },
        ],
      };
    },
  },
};
</script>

<style scoped>
#echartss {
  width: 1000px;
  height: 600px;
}
</style>